<template>
  <div class="collection-block" v-if="!loading">
    <!-- 标题 -->
    <div class="title">
      <h3>{{ top.name }}</h3>
      <router-link :to="`/more/${this.top.id}`" tag="a">更多</router-link>
    </div>

    <!-- 内容 -->
    <div class="list clearfix">
      <!-- 歌曲 -->
      <router-link class="item" v-for="(item, i) in musicList" :key="i" :to="`/song/${item.id}`" tag='div'>

        <!-- 歌曲封面 -->
        <div class="imgWarpper">
          <img :src="item.al.picUrl" alt="">
        </div>

        <!-- 歌曲名称 -->
        <div class="main rowShows">{{ item.name }}</div>

        <!-- 歌手 -->
        <div class="gary rowShows">
          <!-- 多个歌手 -->
          <span v-for="(ar,i) in item.ar" :key="ar.id">
            {{ ar.name }}
            <i v-if="item.ar.length == 1"></i>
            <i v-else-if="item.ar.length-1 == i"></i>
            <i v-else>/</i>
          </span>
        </div>

      </router-link>
    </div>

  </div>

  <Loading v-else></Loading>
</template>

<script>
import Loading from '@/views/loading/Loading.vue'

export default {
  data () {
    return {
      // 页面正在加载
      loading: true,
      // 歌单列表
      musicList: []
    }
  },
  components: {
    Loading
  },
  props: {
    // 歌单的ID
    top: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  created () {
    // 页面加载
    this.loading = true

    // 获取歌单信息,只获取6首歌曲
    this.$api.getMusicList(this.top.id, 6).then(res => {
      // console.log(res.songs);
      this.musicList = res.songs

      // 页面加载完成
      this.loading = false
    })
  },

}
</script>

<style lang='less' scoped>
// 网页主体
.collection-block {
  background-color: #f8f8f8;
  margin: 15px 0;
  padding: 10px;
}

// 各个榜单的标题
.title {
  display: flex;
  justify-content: space-between;
  height: 10vw;
  line-height: 10vw;

  h3 {
    font-size: 4vw;
    padding: 0 5vw;
    font-weight: 700;
    color: #333;
  }

  a {
    color: #333;
    font-size: 3vw;
  }
}

// 榜单的内容区域
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  // 每一项歌曲
  .item {
    width: 30vw;
    margin-bottom: 5vw;
    display: flex;
    flex-direction: column;
    text-align: center;

    // 歌曲的封面
    .imgWarpper {
      width: 100%;
      height: 30vw;

      img {
        width: 30vw;
        height: 30vw;
        background-color: rgb(191, 191, 191);
      }
    }

    // 歌名
    .main {
      font-size: 3vw;
      color: #333;
      margin-top: 2vw;
    }

    // 歌手
    .gary {
      font-size: 3vw;
      height: 4vw;
      line-height: 4vw;
      color: #555;
      margin:  1vw 0;
    }
  }
}
</style>
